import { Modal, Form, message } from 'antd';
import { ProFormText, ProFormSelect } from '@ant-design/pro-components';
import { useEffect } from 'react';
function UpdateForm({ onSubmit, onCancel, updateModalOpen, values }) {
  const [form] = Form.useForm();
  useEffect(()=>{
    form.setFieldsValue(values);
  },[values]);
  return (
    <Modal
      width={640}
      destroyOnClose={true}
      title="更新用户"
      open={updateModalOpen}
      onOk={() => {
        form.validateFields()
          .then(values => {
            onSubmit(values);
            form.resetFields();
          }, error => {
            message.error(error.message);
          })
      }}
      onCancel={() => {
        onCancel();
      }}
    >
      <Form
        form={form}
      >
        <ProFormText
          width="md"
          name="username"
          label="用户名"
          rules={[{ required: true, message: '用户名为必填项' }]}
        />
        <ProFormText
          width="md"
          name="password"
          label="密码"
          rules={[{ required: true, message: '密码为必填项' }]}
        />
        <ProFormText
          width="md"
          name="name"
          label="姓名"
          rules={[{ required: true, message: '姓名为必填项' }]}
        />
        <ProFormText
          width="md"
          name="email"
          label="邮箱"
          rules={[{ required: true, message: '邮箱为必填项' }]}
        />
        <ProFormSelect
          name="access"
          label="角色"
          width="md"
          rules={[{ required: true, message: '角色为必填项' }]}
          options={
            [
              { value: 'root', label: '超级管理员' },
              { value: 'admin', label: '管理员' },
              { value: 'member', label: '普通会员' }
            ]
          }
        />
      </Form>
    </Modal>
  )
}
export default UpdateForm;
